import { Block, Box } from './index.js'
import { hot } from '../js/game.js'

export default {
    components: {
        mBlock: Block,
        mBox: Box,
        hotSwiper: null
    },
    data() {
        return {
            hot
        }
    },
    mounted() {
        this.$nextTick(() => {
            this.hotSwiper = new Swiper(".hot-swiper", {
                breakpoints: {
                    768: {
                        slidesPerView: 2,
                        spaceBetween: 10,
                    },
                    1024: {
                        slidesPerView: 3,
                        spaceBetween: 10,
                    },
                    1440: {
                        slidesPerView: 4,
                        spaceBetween: 10,
                    }
                }
            });
        })
    },
    methods: {
        handleHotPrev() {
            this.hotSwiper.slidePrev()
        },
        handleHotNext() {
            this.hotSwiper.slideNext()
        }
    },
    template: `
    <m-Block title="Hot Now" @prev="handleHotPrev" @next="handleHotNext">
        <div class="hot-swiper common-swiper">
            <div class="swiper-wrapper">
                <div class="swiper-slide" v-for="clo in hot">
                    <div class="mix" v-for="game in clo" style="padding-bottom: 10px;">
                        <m-Box type="row" :game="game"></m-Box>
                    </div>
                </div>
            </div>
        </div>
    </m-Block>
    `
}